<template>
  <div class="clearfix">
    <el-col :span="24" class="toolbar" style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSizeNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        ref="paginationCZ"
      ></el-pagination>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //分页
      pageNo: 1,
      total: 0,
      pageSizeNumber: 20,
    }
  },
  //搜索条件
  props: [
    'filterField',
    'requestUrl',
    'pageSize',
    'pageSizes',
    'isPackParams',
    'projectId',
  ],
  mounted() {},
  computed: {},
  methods: {
    getTableListDataCZ(currentPage, pageSize) {
      if (!currentPage) {
        if (this.pageSize) {
          this.pageSizeNumber = this.pageSize
        } else {
          this.pageSizeNumber = 20
        }
        this.$refs.paginationCZ.internalCurrentPage = 1
      }

      var pageS
      if (pageSize) {
        pageS = pageSize
      } else if (this.pageSize) {
        pageS = this.pageSize
      } else {
        pageS = 20
      }
      var data = {
        pageNo: currentPage ? currentPage : 1,
        pageSize: pageS,
        projectId: this.projectId,
      }
      this.axios({
        method: 'post',
        url: this.requestUrl,
        data: data,
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (response.data.results) {
                this.tableList = response.data.results
              } else {
                this.tableList = []
              }
              //传值到父组件
              this.$emit('getList', this.tableList)
              this.total = response.data.total
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'warning',
              })
            }
          },
          (response) => {
            this.tableList = []
            // //传值到父组件
            this.$emit('getList', this.tableList)
            this.$message({
              message: '数据获取失败',
              type: 'warning',
            })
            // this.total = response.data.total;
          }
        )
        .catch((error) => {
          this.tableList = []
          // //传值到父组件
          this.$emit('getList', this.tableList)
        })
    },
    //每页显示多少条
    handleSizeChange(val) {
      // 选中条数变为第一页
      this.pageNo = 1
      // this.$emit("getPageSize",val);
      this.pageSizeNumber = val
      this.$refs.paginationCZ.internalCurrentPage = this.pageNo
      this.getTableListDataCZ(this.pageNo, val)
    },
    //显示第几页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.getTableListDataCZ(val, this.pageSizeNumber)
    },
  },
}
</script>
<style scoped lang="less">
/dee/ .el-pager li {
  max-width: 8px;
}
.clearfix:after {
  content: '.'; /*加一段内容*/
  display: block; /*让生成的元素以块级元素显示，占满剩余空间*/
  height: 0; /*避免生成的内容破坏原有布局高度*/
  clear: both; /*清除浮动*/
  visibility: hidden; /*让生成的内容不可见*/
}
.clearfix {
  zoom: 1; /*为IE6，7的兼容性设置*/
}
</style>
